<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0px;
      }

      #app {
        height: 100%;
      }

      /*控制整个滚动条*/
      ::-webkit-scrollbar {
        background-color: #f2f6fc;
        width: 10px;
        height: 10px;
        background-clip: padding-box;
      }

      /*滚动条两端方向按钮*/
      ::-webkit-scrollbar-button {
        background-color: #f56c6c;
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }

      /*滚动条中间滑动部分*/
      ::-webkit-scrollbar-thumb {
        background-image: linear-gradient(to top, #00c9ff 0%, #66a6ff 100%);
        border-radius: 5px;
      }

      /*滚动条右下角区域*/
      ::-webkit-scrollbar-corner {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
